<template>
  <div>
    <el-form>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item>
            <el-input ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="primary" @click="add()">增加</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!--表格内容-->
    <el-table ref="departmentList" :data="tableData" style="width: 100%; margin-bottom: 5px" border stripe
      highlight-current-row :default-sort="{ prop: 'date', order: 'descending' }" @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone" @select="handleCheckedAllAndCheckedNone"
      :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
      <el-table-column type="selection"></el-table-column>
      <el-table-column property="name" label="部门名称"> </el-table-column>
      <el-table-column property="glzid" label="管理者ID"> </el-table-column>
      <el-table-column property="glzxm" label="管理者姓名"> </el-table-column>
      <el-table-column property="bmrs" label="部门人数"> </el-table-column>
      <el-table-column property="qyid" label="隶属企业ID"> </el-table-column>
      <el-table-column property="qymc" label="隶属企业名称"> </el-table-column>
      <el-table-column property="remark" label="备注"> </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit-outline" type="primary" title="编辑" size="small"
            @click="rowEdit(scope.row)"></el-button>
          <el-button circle icon="el-icon-delete" type="danger" title="删除" size="small"
            @click="rowDel(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size="10" :total="100"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

    <!-- 增加-弹出层 -->
    <Edit v-if="departmentEditShow" :departmentEditShow="departmentEditShow" @dialogClose="dialogClose" :record="formFileds" @getList="getList"></Edit>
    <Add v-if="departmentAddShow" :departmentAddShow="departmentAddShow" @dialogClose="dialogClose" @getList="getList"></Add>
  </div>
</template>
      
<script>
import Edit from './departmentEdit.vue'
import Add from './departmentAdd.vue'
import { getAll, delDepartment } from '@/api/systemAdministrator/departmentManage'
export default {
  name: 'departmentManage',
  components: {
    Edit,
    Add
  },
  data () {
    return {
      formFileds: {},
      tableData: [],
      departmentEditShow: false,
      departmentAddShow: false
    }
  },
  methods: {
    handleRowClick (row, event, column) {
      // 仅选中当前行
      this.setCurRowChecked(row)
    },
    handleCheckedAllAndCheckedNone (selection) {
      // 当前选中仅一行时操作-（当前表格行高亮）
      1 != selection.length && this.$refs.departmentList.setCurrentRow()
    },
    dialogClose () {
      this.departmentEditShow = false
      this.departmentAddShow = false
    },
    rowEdit (row) {
      //当前选中行
      this.formFileds = row
      this.departmentEditShow = true
    },

    rowDel (id) {
      // 让当前删除按钮失焦
      // $event.target.blur()

      this.$confirm('确定要删除当前行吗？', '删除', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delDepartment(id).then((res)=>{
          this.$message.success('删除成功!')
          this.getList()
        })
      })
    },
    // 选中当前行-当前行的复选框被勾选
    setCurRowChecked (row) {
      this.$refs.departmentList.clearSelection()
      this.$refs.departmentList.toggleRowSelection(row)
    },
    add () {
      this.departmentAddShow = true
    },
    getList () {
      getAll().then((res) => {
        this.tableData=res.data
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
      
<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}
</style>
      